<template>
	<view>

		<u-swiper :list="list" height="750" mode="number" indicator-pos='bottomRight' :autoplay='false' class="swiper">
		</u-swiper>

		<view class="c_title_cantainer">
			<view class="c_title_cantainer_c"><text style="color: #ED2D38;font-size: 28rpx;font-weight: bold;">销售价￥<text
						style="font-size: 40rpx;font-weight: bold;" v-if="goodsInfo.sku">{{(goodsInfo.sku[0].buyPrice/100).toFixed(2)||0}}</text></text>
				<!-- <text class="yj" v-if="commission!=0">佣金{{commission}}起</text> -->
				<text
					style="color: #878585;position: absolute;font-size: 24rpx;right: 30rpx;">已售{{goodsInfo.salesNum||0}}件</text>
			</view>
			<view class="c_title_name1">{{goodsInfo.cardModel.name||''}}</view>
		</view>

		<view style="background-color: #FFFFFF;margin-top: 20rpx;">
			<view class="food_sku" @tap='buyProduct'>
				规格 <text style="margin-left: 36rpx;color: #181617;">请选择 规格、数量</text>
				<view style="position: absolute;right: 30rpx;"> <u-icon name="arrow-right"></u-icon></view>
			</view>
			<!-- <view style="width: 690rpx;margin-left: 30rpx;height: 1rpx;background-color: #F0F0F0;"></view>
			<view class="food_sku" style="margin-top: 0rpx;">
				参数 <text style="margin-left: 36rpx;color: #181617;">不支持退货、品牌、产地</text>
				<view style="position: absolute;right: 30rpx;"> <u-icon name="arrow-right"></u-icon></view>
			</view> -->
		</view>
		<!-- <view style="background-color: #FFFFFF;margin-top: 20rpx;">
			<view class="food_sku">

				配送 <view style="margin-left: 36rpx;"><u-icon name="checkmark-circle"></u-icon> <text
						style="margin-left: 6rpx;color: #181617;">商家配送</text>

					<view style="position: absolute;right: 30rpx;"> <u-icon name="arrow-right"></u-icon></view>
				</view>
			</view>
			<view style="width: 690rpx;margin-left: 30rpx;height: 1rpx;background-color: #F0F0F0;"></view>
			<view class="food_sku" style="margin-top: 0rpx;">
				服务 <text style="margin-left: 36rpx;color: #181617;">发货时间 . 发货类型</text>
				<view style="position: absolute;right: 30rpx;"> <u-icon name="arrow-right"></u-icon></view>
			</view>
		</view> -->

		<view style="color: #878585;width: 750rpx;height: 100rpx;text-align: center;line-height: 100rpx;">详情介绍</view>
		<u-parse :html="goodsInfo.goodsInfo.introduction" class='top-comment'></u-parse>
		<view style="width: 750rpx;height: 250rpx;" ></view>
	<view style="position: fixed;bottom: 0rpx;">
			<buy-car @toMy='toMy' :isGroup='isGroup' :salePrice='salePrice'
				:marketPrice='obj.baseInfo.product_sale_price' :productId='obj.baseInfo.id'
				:productType='obj.baseInfo.product_type' @toMall='toMall' @buyProduct='buyProduct'
				@showAgreement='showAgreement' @groupBuy='groupBuy'></buy-car>
		</view>
	
		<image src="https://aliyunoss.hntgov.net/sd/sd_share_tb.png" @tap='shareProduct'
			style="width: 64rpx;height: 64rpx;position: absolute;top: 50rpx;right: 30rpx;"></image>
		<u-popup v-model="show" mode='bottom' border-radius="10" :closeable="true">
			<view style="padding: 20rpx 20rpx 0rpx 20rpx;">
				<view style="display: flex;width: 710rpx;">
					<image :src="goodsInfo.goods.mainPic" style="width: 200rpx;height: 200rpx;margin-top: 0rpx;"
						mode="aspectFill">
					</image>
					<view
						style="display: flex;flex-direction: column;margin-left: 30rpx;width: 480rpx;height: 200rpx;position: relative;margin-top: 0rpx;">
						<view style="color: #EE2B2B;font-weight: bold;margin-top: 12rpx;"><text
								style="font-size: 13px;">￥</text><text
								style="font-size: 32rpx;">{{(skuItem.buyPrice/100).toFixed(2)}}</text></view>
						<!-- <text style="font-size: 24rpx;color: #ccc;padding-top: 15rpx;">库存{{skuItem.stock||0}}件</text> -->
						<view style="color:#312F2F;font-size: 24rpx;margin-top: 15rpx;">
							已选 &nbsp; {{skuItem.skuName}}
						</view>

					</view>
				</view>
				<view class="productType">
					商品类型
				</view>

				<view style="display: flex;margin-top: 24rpx;flex-wrap: wrap;">
					<view v-for="(item,index) in goodsInfo.sku" :key='index' @tap='select(index)'>
						<view :class="index==flag?'sku-item1':'sku-item2'">
							{{item.skuName}}
						</view>
					</view>
				</view>
				<view style="height: 1px;background-color: #F2EFEF;margin-top: 40rpx;margin-bottom: 40rpx;"></view>

				<view
					style="display: flex;position: relative;padding-bottom: 180rpx;align-items: center;justify-content: center;">
					<view class="productType" style="margin-top: 0rpx;position: absolute;left: 0rpx;">
						购买数量
					</view>
					<view style="position: absolute;right: 30rpx;">
						<u-number-box v-model="num" :min='1'  @change="valChange"
							style='position: absolute;right: 0rpx;'>
						</u-number-box>
					</view>
				</view>
				<view class="immediately" @tap='immediatelyBuy()'>立即购买</view>
			</view>
		</u-popup>
		<u-popup v-model="show1" mode='bottom' height='200' style='text-align: center;' duration='100'
			border-radius="20">
			<view style="height: 40rpx;"></view>
			<view style="display: flex;align-items: center;">

				<button data-name="shareBtn" open-type="share"
					style="flex: 1;align-items: center;justify-content: center;height: 160rpx;background-color: #FFFFFF;display: flex;flex-direction: column;">
					<image src="https://aliyunoss.hntgov.net/sd/zfb_share.png" style="width: 64rpx;height: 64rpx;">
					</image>
					<text style="font-size: 14px;">支付宝分享</text>
				</button>


				<button @tap='sharePoster()'
					style="flex: 1;align-items: center;justify-content: center;height: 160rpx;background-color: #FFFFFF;display: flex;flex-direction: column;">
					<image src="https://aliyunoss.hntgov.net/sd/zfb_haibao.png" style="width: 64rpx;height: 64rpx;">
					</image>
					<text style="font-size: 14px;">生成海报</text>
				</button>
			</view>
		</u-popup>
		<u-popup v-model="ashow" mode="center" width='700' border-radius='8'>
			<view>
				<view style="padding: 20rpx;line-height: 40rpx;font-size: 28rpx;">
					<view
						style="color: #000;font-weight: bold;width: 660rpx;text-align: center;font-size: 30rpx;margin-bottom: 20rpx;">
						锦绣潇湘“文旅卡”使用细则</view>
					发卡方式：购买旅游卡后，系统自动发送卡号，会通过短信的方式下发到下单手机号码，最快半小时最慢24小时内发送。</br>
					有效日期：本卡有效期为365天，自购买之日起自动开始计算有效期，请购买后尽快绑定。所有已售出的卡无法退换。</br>
					合作景区：有关景区权益变动及开放时段信息，以官方微信公众号为准。</br>
					使用方法：需要关注年卡对应的公众号，通过输入卡号、姓名、电话等信息绑定好后，获取电子门票二维码（核销凭证）；


				</view>
				<view class="agree_s" @click="aShow()">我知道了</view>
			</view>
		</u-popup>
		<u-popup-tm v-model="showPicture" mode='center' height='1300' border-radius='10' width='700' :mask='true'
			style='background-color: #00000000;'>
			<view
				style="width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;height: 100%;">
				<image :src="path" style="width: 550rpx;height: 1050rpx;"></image>
				<view style="margin-top: 20rpx;display: flex;gap: 50rpx;">
					<u-button style="width: 100rpx;" size='mini' type='primary' @click="savePicture()">保存</u-button>
					<u-button style="width: 100rpx;" size='mini' @click="cancelShowPicture()">取消</u-button>
				</view>
			</view>
		</u-popup-tm>
		<l-painter style="position: absolute;bottom: -10000rpx;" v-show="false" ref="painter" />
	</view>
</template>

<script>
	var that = ''
	import BuyCar from '../../components/buy-car.vue'

	export default {
		components: {
			BuyCar
		},
		watch: {

		},
		data() {
			return {
				poster1: {
					css: {
						width: "550rpx",
						height: "1050rpx",
						background: "#ffffff",
						paddingTop: "30rpx",
						paddingLeft: "20rpx",
						paddingRight: "20rpx",
						paddingBottom: "30rpx",
					},
					views: [{
							type: "view",
							css: {
								height: "80rpx",
								lineHeight: "80rpx",
							},
							views: [{
									src: "https://offline.hntgov.net/file/UploadFile/Image/2021-05-12/logo1.png",
									type: "image",
									css: {

										objectFit: "cover",
										width: "80rpx",
										boxSizing: "border-box",
										height: "80rpx",
										borderRadius: "50%",
									}
								},
								{
									type: "view",
									css: {
										display: "inline-block",
										marginLeft: "22rpx",

									},
									views: [{
										text: "质惠游湖南",
										type: "text",
										css: {
											display: "block",
											color: "#000000",
											fontSize: "30rpx",
											lineHeight: "42rpx",
										}
									}, {
										text: `1993-10-18`,
										type: "text",
										css: {
											display: "block",
											color: "#7f7f7f",
											fontSize: "20rpx",
											paddingTop: "9rpx",
											lineHeight: "42rpx",
										}
									}]
								}
							]
						},
						{
							src: "https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg",
							type: "image",
							css: {

								objectFit: "cover",
								width: "510rpx",
								boxSizing: "border-box",
								height: "510rpx",
								marginTop: "26rpx",
							}
						},
						{
							text: "张家界国家森林公园张家界国家森林公园张家界国家森林公园张家界国家森林公园张家界国家森林公园张家界国家森林公园",
							type: "text",
							css: {
								color: "#000000",
								fontSize: "30rpx",
								fontWeight: "bold",
								lineClamp: 2,
								width: "510rpx",
								lineHeight: "42rpx",
								marginTop: "25rpx",
							}
						},
						{
							text: "免费停车、行李寄存、餐厅、超市、冷暖空调...",
							type: "text",
							css: {
								color: "#666666",
								fontSize: "22rpx",
								lineClamp: 1,
								width: "510rpx",
								lineHeight: "42rpx",
								marginTop: "25rpx",
							}
						},
						{
							type: "view",
							css: {
								display: "inline-block",
								marginTop: "25rpx",

							},
							views: [{
									type: "view",
									css: {
										display: "inline-block",
										marginTop: "22rpx",
									},
									views: [{
										text: "￥128",
										type: "text",
										css: {
											display: "block",
											color: "#FF0000",
											fontSize: "44rpx",
											lineHeight: "62rpx",
										}
									}, {
										src: "https://offline.hntgov.net/file/UploadFile/Image/2021-08-18/toimage.jpg",
										type: "image",
										css: {

											objectFit: "cover",
											width: "300rpx",
											boxSizing: "border-box",
											height: "60rpx",
											marginTop: "21rpx",
										}
									}]
								},
								{
									src: "https://offline.hntgov.net/wechat/UploadFile/Image/Applets/d0cd427c83194fe69a005cf129fe5047.png",
									type: "image",
									css: {
										display: "inline-block",
										background: "#fff",
										objectFit: "cover",
										width: "176rpx",
										boxSizing: "border-box",
										height: "155rpx",
										marginLeft: "20rpx",
										marginTop: "15rpx",
									}
								}
							]
						}
					]
				},
				path: '',
				goodsInfo: '',
				showPicture: false,
				ashow: false,
				count: 5,
				totalCount: 0,
				num: 1,
				skuName: '',
				show: false,
				show1: false,
				show2: false,
				show3: false,
				scrollTop: 0,
				flag: 0,
				list1: [{
					name: '商品'
				}, {
					name: '评论'
				}, {
					name: '详情'
				}],
				descInfo: '',
				activeDay: '',
				activeHour: '',
				activeMin: '',
				activeS: '',
				groupDay: '',
				groupHour: '',
				groupMin: '',
				groupS: '',
				current: 0,
				src: 'http://cdn.hntgov.net/online/static/s_morentouxiang.png',
				list: [],
				productId: '',
				obj: {},
				price: 0,
				skuId: '',
				limitNum: 0,
				skuSaletSock: 0,
				isDiscount: 0,
				disCount: 0,
				swiperTop: 0,
				foodsTop: 0,
				commentTop: 0,
				code: '',
				commentLists: '',

				xyList: [],
				hdsjList: [],
				commission: 0,
				weikeProductCommissionList: [],
				shopName: '',
				fxObj: '',
				groupId: '',
				salePrice: 0,
				product_sku_id: 0,
				isGroup: false,
				isAlone: true,
				groupOrderId: '',
				groupLists: [],
				groupIdNote: '',
				groupInfo: '',
				countdownInterval: null,
				endDate: '',
				cardModelId: '',
				skuItem: '',
				goodsId:''
			}
		},

		onLoad(e) {
			that = this
			this.goodsId = e.goodsId
			this.poster1.views[0].views[1].views[1].text =
				`${new Date().getFullYear()}-${('0'+(new Date().getMonth() + 1)).slice(-2)}-${('0'+(new Date().getDate())).slice(-2)}`
			this.getCardModelDetailUrlMethod()
		},
		onShow() {},
        onPageScroll(e) {

			this.scrollTop = e.scrollTop
			var scrollTop = e.scrollTop - 40
			if (0 < scrollTop && scrollTop < this.foodsTop) {
				this.current = 0
			}
			if (this.foodsTop < scrollTop && scrollTop < this.commentTop) {
				this.current = 1
			}
			if (scrollTop > this.commentTop) {
				this.current = 2
			}
		},
		methods: {
			showAgreement() {
				this.ashow = true
			},
			aShow() {
				this.ashow = false
			},
			cancelShowPicture(){
				this.showPicture=false
			},
			valChange(e) {

			},
			toMy() {
				uni.switchTab({
					url: '../index/my'
				})
			},
			toMall() {
				uni.switchTab({
					url: '../index/index'
				})
			},
			onShareAppMessage: function(e) {
				return {
					title: that.goodsInfo.goods.name,
					path: 'pages/goods/goods?goodsId=' + this.goodsId,
				}
			},

			buyProduct() {
				this.show = true
			},




			select(e) {

			},
			getCardModelDetailUrlMethod() {
				that.$u.api.getCardModelDetailUrl({
					goodsId: that.goodsId
				}).then(res => {
					if (res) {
						this.cardModelId=res.data.cardModel.id
						this.$store.commit('setCardModelDetail',res.data)
						
						if(res.data.goodsInfo.propagatePic){
							this.list = res.data.goodsInfo.propagatePic.split(',')
						}
						this.list.unshift(res.data.goods.mainPic)
						
						this.goodsInfo = res.data
						this.poster1.views[1].src = res.data.goods.mainPic
						this.poster1.views[2].text = res.data.goods.name
						this.poster1.views[3].text = res.data.goodsInfo.tags
						this.skuItem = res.data.sku[0]


					}
				})
			},
			shareProduct() {
				this.getQrCode()
			},

			savePicture() {
				//获取带参数二维码
				uni.saveImageToPhotosAlbum({
					filePath: that.path,
					success: function() {
						that.show = false
						uni.showToast({
							icon: 'success',
							title: '保存成功'
						})
					}
				});
			},
			sharePoster() {
				uni.showLoading({})
				this.$refs.painter.render(this.poster1);
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						that.showPicture = true
						that.show1 = false
						that.path = res.tempFilePath
						uni.hideLoading()
						// 非H5 保存到相册
						// H5 提示用户长按图另存
					},
				});
			},
			getQrCode() {
				var path = "pages/goods/goods"
				var scene = `goodsId=${this.goodsId}`

				that.$u.api.getQrCodeUrl({
					urlParam: path,
					queryParam: scene,
					describe: '生成推广码'
				}).then(res => {
					if (res) {
						this.show1 = true
						this.poster1.views[4].views[1].src = res.data.qrCodeUrlCircleWhite
						this.poster1.views[4].views[0].views[0].text = '￥' + (this.skuItem.buyPrice / 100).toFixed(
							2)
					}
				})

			},

			immediatelyBuy() {
				this.$store.commit('setSkuInfo',this.skuItem)
				uni.navigateTo({
					url: `../order/ordersure?cardModleId=${this.cardModelId}&buyNum=${this.num}&skuId=${this.skuItem.id}&goodsId=${this.goodsId}`

				})
				that.show = false
			},
		}

	}
</script>

<style lang="scss">
	.group_text_bj {
		background: linear-gradient(180deg, #f4c663 16%, #db3009 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.group_rq {
		position: absolute;
		top: 571rpx;
		left: 0rpx;

	}

	.group_btn {
		width: 350rpx;
		margin-left: 50rpx;
		background-color: #e6212a;
		border-radius: 5rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		height: 70rpx;
		margin-top: 30rpx;
	}

	.agree_s {
		width: 700rpx;
		border-radius: 0rpx 0rpx 8rpx 8rpx;
		background-color: #11c35a;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;

	}

	.yj {
		margin-left: 30rpx;
		color: #C7C7C7;
		font-size: 20rpx;
		padding: 0rpx 5rpx 0rpx 5rpx;
		border-radius: 30rpx;
		border: 2rpx #ED2D38 solid;
		color: #ED2D38;
	}

	.immediately {
		width: 710rpx;
		background: linear-gradient(90deg, #FF3F3C -8%, #FFA371 107%);
		height: 80rpx;
		color: #fff;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 20rpx;
	}

	page {
		background-color: #F7f7f7
	}

	button {
		border: none;
	}

	button::after {
		border: none;
	}

	.productType {
		width: 60px;
		height: 20px;
		font-size: 15px;
		font-family: Nirmala UI;
		font-weight: bold;
		line-height: 20px;
		color: #312F2F;
		opacity: 1;

		margin-top: 38rpx;
	}

	.sku-item {
		margin-right: 20rpx;
		border: 1rpx rgb(246, 246, 246) solid;
		background-color: rgb(246, 246, 246);
		border-radius: 8rpx;
		font-size: 24rpx;
		height: 45rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		color: #000;
		pointer-events: none;
		margin-bottom: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.sku-item2 {
		margin-right: 20rpx;
		border: 1rpx rgb(246, 246, 246) solid;
		background-color: rgb(246, 246, 246);
		border-radius: 8rpx;
		font-size: 24rpx;
		height: 45rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		color: #999;
		pointer-events: none;
		margin-bottom: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.sku-item1 {
		margin-right: 20rpx;
		border: 1rpx rgb(238, 16, 53) solid;
		background-color: rgb(252, 230, 233);
		border-radius: 8rpx;
		font-size: 24rpx;

		height: 45rpx;

		padding-left: 10rpx;
		padding-right: 10rpx;
		color: rgb(238, 16, 53);
		margin-bottom: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.sfm {
		padding: 6rpx;
		font-size: 26rpx;
		color: #FA3249;
		background-color: #FFFFFF;
		margin: 10rpx;
		border-radius: 4rpx;
	}

	.sfm1 {
		padding: 2rpx;
		font-size: 18rpx;
		color: #fff;
		background-color: #f3452f;
		margin: 7rpx;
		border-radius: 4rpx;
	}

	.time_text {
		background-color: rgb(226, 44, 65);
		color: #FFFFFF;
		padding: 5rpx;

		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		border-radius: 4rpx;
	}

	.time_reduce {
		width: 750rpx;
		height: 192rpx;
		background-image: url('http://cdn.hntgov.net/online/static/active_bj.png');
		background-size: 100% 100%;
		padding: 24rpx 30rpx 24rpx 30rpx;
		display: flex;
	}

	.time_orgie {
		font-size: 26rpx;
		color: #FFFFFF;
		position: relative;
		width: 65rpx;
	}

	.time_right {
		position: absolute;
		right: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-end;

	}

	.food_sku_compent {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx 24rpx 30rpx;
		font-size: 24rpx;
		color: #181617;
		position: relative;
		background-color: #fff;
		margin-top: 20rpx;
	}

	.food_sku {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx 24rpx 30rpx;
		font-size: 24rpx;
		color: #878585;
		position: relative;
		background-color: #fff;
	}



	.c_title_cantainer {
		background-color: #FFF;
		padding: 30rpx;
		position: relative;

		.c_title_cantainer_c {
			display: flex;
			align-items: center;

		}

		.c_title_name {
			color: #3D3D3D;
			font-size: 30rpx;
			width: 582rpx;
			font-weight: bold;
			margin-top: 20rpx;
		}

		.c_title_name1 {
			color: #3D3D3D;
			font-size: 30rpx;
			width: 690rpx;
			font-weight: bold;
			margin-top: 20rpx;
		}

		.c_title_introduce1 {
			color: #878585;
			font-size: 24rpx;
			width: 690rpx;
			margin-top: 16rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			-webkit-line-clamp: 2;
		}

		.c_title_introduce {
			color: #878585;
			font-size: 24rpx;
			width: 530rpx;
			margin-top: 16rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			-webkit-line-clamp: 2;
		}
	}
</style>